<style type="text/css">
  .tree_box {
    position: relative;
    margin-top: 5px;
    background: #fff;
    font-size: 12px;
    padding: 12px 0 36px 0;
  }
  .tree_footer {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    bottom: 9px;
  }
  .tree_content {
    padding: 12px 0;
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #eee;
  }
  .op_header {
    margin-bottom: 12px;
    padding-left: 24px;
  }
  .search_box {
    vertical-align: middle;
    display: inline-block;
  }
</style>
<div id="content">
  <div class="row s_page_title" *ngIf="pageType === '菜单'">
    <sa-big-breadcrumbs
      [items]="['系统基础管理', '角色管理', '角色菜单权限设置']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <div class="row s_page_title" *ngIf="pageType === '车辆'">
    <sa-big-breadcrumbs
      [items]="['系统基础管理', '角色管理', '角色车辆权限设置']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <div class="row s_page_title" *ngIf="pageType === '绑定'">
    <sa-big-breadcrumbs
      [items]="['系统基础管理', '角色管理', '角色绑定车辆到公司权限设置']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <div class="row s_page_title" *ngIf="pageType === '围栏'">
    <sa-big-breadcrumbs
      [items]="['系统基础管理', '角色管理', '围栏权限设置']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <div class="row s_page_title" *ngIf="pageType === '首页'">
    <sa-big-breadcrumbs
      [items]="['系统基础管理', '角色管理', '首页权限设置']"
      icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <div class="page-header" style="margin: 0; padding: 12px; background-color: #fff">
    <h1 class="page_detail_title">{{ pageType }}权限设置-[{{ roleName }}]</h1>
  </div>
  <div class="row tree_box" style="margin-top: 0">
    <div class="op_header">
      <button *ngIf="pageType !== '首页'" type="button" (click)="allOpen()" class="btn btn-primary">全部展开</button>
      <button *ngIf="pageType !== '首页'" type="button" (click)="allClose()" class="btn btn-primary">全部折叠</button>
      <button
        type="button"
        (click)="allCheck()"
        class="btn btn-primary"
        *ngIf="((pageType === '车辆' || pageType === '绑定') && companyCar.length > 0) || pageType === '首页'"
      >
        {{ isAllSelect ? '取消全选' : '全选' }}
      </button>
      <div class="top-search search_box">
        <input
          type="text"
          [(ngModel)]="searchKey"
          (change)="table_search()"
          class="search-input"
          placeholder="关键字..."
        />
        <span class="top-search-box">
          <button class="top-search-btn" type="button" (click)="table_search()"><i class="fa fa-search"></i></button>
        </span>
      </div>
      <div class="top-search search_box" style="margin-left: 10px">
        <div
          class="search_box"
          style="
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 22px;
            border-radius: 4px;
            border: 1px solid #6e6e6e;
            font-size: 20px;
            cursor: pointer;
          "
          (click)="arrowClick(0)"
        >
          <i class="fa fa-angle-up angle-up absoArrow" ></i>
        </div>
        <div
          class="search_box"
          style="
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 22px;
            border-radius: 4px;
            border: 1px solid #6e6e6e;
            font-size: 20px;
            margin-left: 5px;
            cursor: pointer;
          "
          (click)="arrowClick(1)"
        >
          <i class="fa fa-angle-down angle-down absoArrow" ></i>
        </div>
      </div>
    </div>
    <div class="col-xs-12" style="padding: 0">
      <div style="font-weight: bold; font-size: 14px; position: absolute; left: 24px; top: 12px">
        {{ pageType }}资源
      </div>
      <div class="form-group tree_content" id="tree_content">
        <div class="" style="margin-left: 100px">
          <div id="tree"></div>
        </div>
      </div>
    </div>
    <div class="center tree_footer">
      <button type="button" (click)="saveDate()" class="btn btn-primary">保存</button>
      <button type="button" (click)="goBack()" class="btn default">返回</button>
    </div>
  </div>
</div>
